<template>
  <div class="lsc-mycenter-info">
    <van-nav-bar
      title="我的帐户"
      left-arrow
      @click-left="onClickBack"
    />
    <div class="lsc-mycenter-info-header">
      <van-row>
        <van-col span="8">帐户余额</van-col>
        <van-col span="8">已结款金额</van-col>
        <van-col span="8">信用额度</van-col>
      </van-row>
      <van-row>
        <van-col span="8">{{accountStatistics.balance}}</van-col>
        <van-col span="8">{{accountStatistics.yjk_money}}</van-col>
        <van-col span="8">{{accountStatistics.credit_amount}}</van-col>
      </van-row>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="lsc-mycenter-info-base">
        <span>款项明细</span>
        <van-row v-for="(item,index) in accountDetails" :key="index">
          <van-col span="13">{{item.createtime}}</van-col>
          <van-col span="7">{{item.money}}</van-col>
          <van-col span="4">{{item.type==1 ? '存入' : '支出'}}</van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'info',
  data () {
    return {
      accountStatistics: {},
      accountDetails: [],
      loading: false,
      finished: false,
      pageinfo: {
        pagesize: 10,
        pageindex: 0,
        total: 0
      }
    }
  },
  created() {
    this.getAccountStatistics()
  },
  methods: {
    onClickBack() {
      this.$router.push('/mycenter')
    },
    getAccountStatistics() {
      this.axios.get(api.agent.accountStatistics)
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.accountStatistics = res.data.data
          }
        })
    },
    getAccountDetails() {
      this.axios.get(api.agent.accountDetails, {params: this.pageinfo})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.accountDetails = res.data.data ? this.accountDetails.concat(res.data.data) : []
            this.pageinfo.total = res.data.pageinfo.total
          }
        })
    },
    onLoad() {
      
      this.loading = true;
      this.pageinfo.pageindex += 1
      setTimeout(()=>{
        this.axios.get(api.agent.accountDetails, {params: this.pageinfo})
          .then((res) => {
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.accountDetails = res.data.data ? this.accountDetails.concat(res.data.data) : []
              this.loading = false;
              if (this.accountDetails.length >= res.data.pageinfo.total) {
                this.finished = true;
              }else {
                this.finished = false;
              }
            }
          })
      }, 500)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-mycenter-info-header {
  padding-top: 20px;
  background: #c7a819;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}
.lsc-mycenter-info-header>div>div {
  padding-bottom: 10px;
}

.lsc-mycenter-info-base {
  background: #fff;
  padding-bottom: 20px;
}
.lsc-mycenter-info-base span {
  line-height: 40px;
  background: #e5e5e5;
  display: block;
  padding-left: 10px;
  font-size: 14px;
}
.lsc-mycenter-info-base>.van-row {
  padding: 0 10px;
  margin-top: 10px;
}
</style>
